export default {
  mounted(el) {
    const selectInput = el.querySelector('input')
    const placeholder = el.querySelector('label')
    const menu = el.querySelector('.menu-box')

    selectInput.addEventListener('focus', () => {
      placeholder.style.display = 'none'
      // menu.style.display = 'block'
      menu.className = 'menu-box fade-in'
    }, false)

    selectInput.addEventListener('blur', () => {
      setTimeout(() => {
        if (selectInput.value.length === 0) {
          placeholder.style.display = 'block'
        }
        // menu.style.display = 'none'
        menu.className = 'menu-box fade-out'
      }, 100)
    }, false)
  },
}